<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://ng-bootstrap.github.io/#/components/dropdown/examples" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleDropdown">
			<div class="m-section">
				<div class="m-section__content">
					<div class="row">
						<div class="col">
							<div ngbDropdown class="d-inline-block">
								<button class="btn btn-success" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
								<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
									<button class="dropdown-item">Action - 1</button>
									<button class="dropdown-item">Another Action</button>
									<button class="dropdown-item">Something else is here</button>
								</div>
							</div>
						</div>

						<div class="col text-right">
							<div ngbDropdown placement="top-right" class="d-inline-block">
								<button class="btn btn-outline-success" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
								<div ngbDropdownMenu aria-labelledby="dropdownBasic2">
									<button class="dropdown-item">Action - 1</button>
									<button class="dropdown-item">Another Action</button>
									<button class="dropdown-item">Something else is here</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleManualTriggers">
			<div class="m-section">
				<span class="m-section__sub">
					You can easily control dropdowns programmatically using the exported dropdown instance.
				</span>
				<div class="m-section__content">
					<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
						<button class="btn btn-primary" id="dropdownManual" ngbDropdownToggle>Toggle dropdown</button>&nbsp;
						<div ngbDropdownMenu aria-labelledby="dropdownManual">
							<button class="dropdown-item">Action - 1</button>
							<button class="dropdown-item">Another Action</button>
							<button class="dropdown-item">Something else is here</button>
						</div>

						<button class="btn btn-success" (click)="$event.stopPropagation(); myDrop.open();">Open from outside</button>&nbsp;
						<button class="btn btn-danger" (click)="$event.stopPropagation(); myDrop.close();">Close from outside</button>
					</div>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleButtonGroupsAndSplitButtons">
			<div class="m-section">
				<span class="m-section__sub">
					Bootstrap split buttons and dropdowns on button groups are supported with the existing dropdown directives.
				</span>
				<div class="m-section__content">

					<div class="btn-group">
						<button type="button" class="btn btn-success">Plain ol' button</button>&nbsp;
						<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
							<button class="btn btn-primary" ngbDropdownToggle>Drop me</button>&nbsp;
							<div class="dropdown-menu" ngbDropdownMenu>
								<button class="dropdown-item">One</button>
								<button class="dropdown-item">Two</button>
								<button class="dropdown-item">Four!</button>
							</div>
						</div>
					</div>

					<div class="btn-group">
						<button type="button" class="btn btn-outline-primary">Split me</button>
						<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
							<button class="btn btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>&nbsp;
							<div class="dropdown-menu" ngbDropdownMenu>
								<button class="dropdown-item">One</button>
								<button class="dropdown-item">Two</button>
								<button class="dropdown-item">Four!</button>
							</div>
						</div>
					</div>

					<div class="btn-group">
						<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
							<button class="btn btn-danger" ngbDropdownToggle>Select me</button>&nbsp;
							<div class="dropdown-menu" ngbDropdownMenu>
								<button class="dropdown-item">One</button>
								<button class="dropdown-item">Two</button>
								<button class="dropdown-item">Four!</button>
							</div>
						</div>
						<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
							<button class="btn btn-success" ngbDropdownToggle>Or me</button>
							<div class="dropdown-menu" ngbDropdownMenu>
								<button class="dropdown-item">One</button>
								<button class="dropdown-item">Two</button>
								<button class="dropdown-item">Four!</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleGlobalConfigurationOfDropdowns">
			<div class="m-section">
				<span class="m-section__sub">
					This dropdown uses customized default values.
				</span>
				<div class="m-section__content">
					<div ngbDropdown>
						<button class="btn btn-primary" id="dropdownConfig" ngbDropdownToggle>Toggle</button>
						<div ngbDropdownMenu aria-labelledby="dropdownConfig">
							<button class="dropdown-item">Action - 1</button>
							<button class="dropdown-item">Another Action</button>
							<button class="dropdown-item">Something else is here</button>
						</div>
					</div>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>